<template>
	<view class="postDetailPage" v-if="isLoad">
		<view class="topContent">
			<view class="title">
				{{info.name}}
			</view>
			<view class="read">
				<view class="item">
					<u--image src="/static/postDetail/1.png" shape="square" mode="aspectFill" width="30rpx"
						height="24rpx"></u--image>
					<view class="count">{{info.readingVolume||0}}</view>
				</view>
				<view class="item secondItem">
					<u--image src="/static/postDetail/2.png" shape="square" mode="aspectFill" width="26rpx"
						height="26rpx"></u--image>
					<view class="count">{{info.replyCount||0}}</view>
				</view>
			</view>
		</view>
		<view class="userContent">
			<view class="avatar">
				<u--image :src="info.headPic" shape="circle" mode="aspectFill" width="124rpx" height="124rpx">
				</u--image>
			</view>
			<view class="titleContent">
				<view class="nickName">{{info.nickName}}</view>
				<view class="roleTag">
					<u--image src="/static/my/8.png" shape="square" mode="aspectFill" width="128rpx" height="36rpx">
					</u--image>
					<view class="roleName">认证{{role}}</view>
				</view>
			</view>
		</view>
		<view class="infoContent">
			<view class="detail">
				<text class="topic" v-if="info.topicName">#{{info.topicName}}</text><text>{{info.content}}</text>
			</view>
			<view class="ablumContent" v-if="info.images">
				<u-album :urls="getAlbumList(info.images)" singleSize="100"></u-album>
			</view>
			<view v-if="info.dcckPosts" class="shareInfo2">
				<view class="itemTop" @click="goPostsDetail">
					<view class="topRight">
						<u--image
							:src="info.dcckPosts.images?(baseUrl+'/sys/common/static/'+info.dcckPosts.images.split(',')[0]):''"
							shape="square" mode="aspectFill" width="208rpx" height="150rpx" bgColor="transparent"
							radius="8rpx"></u--image>
					</view>
					<view class="topLeft">
						<view class="title">{{info.dcckPosts.name}}</view>
						<view class="listInfo">{{info.dcckPosts.content}}</view>
					</view>
				</view>
			</view>
			<view v-if="info.dcckConsultingService" class="shareInfo2">
				<view class="itemTop" @click="goPostsDetail2(info.types)">
					<view class="topRight">
						<u--image
							:src="info.dcckConsultingService.images?(baseUrl+'/sys/common/static/'+info.dcckConsultingService.images.split(',')[0]):''"
							shape="square" mode="aspectFill" width="208rpx" height="150rpx" bgColor="transparent"
							radius="8rpx"></u--image>
					</view>
					<view class="topLeft">
						<view class="title">{{info.dcckConsultingService.name}}</view>
						<view class="listInfo">{{info.dcckConsultingService.describeDesc}}</view>
					</view>
				</view>
			</view>
			<view class="createtime">发布于{{info.createTime}}</view>
		</view>
		<view class="replyContent">
			<view class="count">评论{{info.replyCount||0}}</view>
			<u-empty v-if="!info.replyCount" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"
				text="快来抢首评~">
			</u-empty>
			<view>
				<!-- 一级评论 -->
				<view v-for="(item,index) in info.replys" :key="index">
					<view class="replyUser">
						<view class="replyUserInfo">
							<view class="avatar">
								<u--image :src="item.headPic" shape="circle" mode="aspectFill" width="74rpx"
									height="74rpx">
								</u--image>
							</view>
							<view class="rightContent">
								<view class="titleContent">
									<view class="nickName">{{item.nickName}}</view>
									<view class="roleTag">
										<u--image src="/static/my/8.png" shape="square" mode="aspectFill" width="118rpx"
											height="32rpx">
										</u--image>
										<view class="roleName">认证{{getRoleName(item.role)}}</view>
									</view>
								</view>
								<view class="replyList" @click="selectSomeoneReply(item)">
									{{item.text}}
								</view>
								<view class="replyListOperate">
									<view>
										{{item.createTime}}
									</view>
									<view class="replyCount">
										<u--image src="/static/postDetail/2.png" shape="square" mode="aspectFill"
											width="30rpx" height="30rpx" @click="selectSomeoneReply(item)"></u--image>
										<view class="doThumbsUp" @click="doThumbReply(index,item)">
											<u--image src="/static/postDetail/3.png" shape="square" mode="aspectFill"
												width="30rpx" height="30rpx" v-if="!item.isThumbsUp">
											</u--image>
											<u--image src="/static/solution/33.png" shape="square" mode="aspectFill"
												width="30rpx" height="30rpx" v-else>
											</u--image>
											<view class="thumbCount">{{item.praseCount||0}}</view>
										</view>
									</view>
								</view>
								<!-- 二级评论 -->
								<view v-if="item.nextNodes" v-for="(item2,index2) in item.nextNodes" :key="index2">
									<view class="replyUser">
										<view class="replyUserInfo">
											<view class="avatar">
												<u--image :src="item2.headPic" shape="circle" mode="aspectFill"
													width="74rpx" height="74rpx">
												</u--image>
											</view>
											<view class="rightContent">
												<view class="titleContent">
													<view class="nickName">{{item2.nickName}}</view>
													<view class="roleTag">
														<u--image src="/static/my/8.png" shape="square"
															mode="aspectFill" width="118rpx" height="32rpx">
														</u--image>
														<view class="roleName">认证{{getRoleName(item2.role)}}</view>
													</view>
													<view class="replyToIcon">
														<u-icon name="arrow-down-fill" color="#999999FF" size="18rpx">
														</u-icon>
													</view>
													<view class="nickName">{{item2.nickNames}}</view>
												</view>
												<view class="replyList" @click="selectSomeoneReply(item2)">
													{{item2.text}}
												</view>
												<view class="replyListOperate">
													<view>
														{{item2.createtime||'2022-08-22 13:23:11'}}
													</view>
													<view class="replyCount">
														<u--image src="/static/postDetail/2.png" shape="square"
															mode="aspectFill" width="30rpx" height="30rpx"
															@click="selectSomeoneReply(item2)"></u--image>
														<view class="doThumbsUp"
															@click="doThumbReply(index,item2,index2)">
															<u--image src="/static/postDetail/3.png" shape="square"
																mode="aspectFill" width="30rpx" height="30rpx"
																v-if="!item2.isThumbsUp">
															</u--image>
															<u--image src="/static/solution/33.png" shape="square"
																mode="aspectFill" width="30rpx" height="30rpx" v-else>
															</u--image>
															<view class="thumbCount">{{item2.praseCount||0}}</view>
														</view>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore v-if="info.replyCount" :status="isFinish?'nomore':'loading'" loading-text="正在加载"
				loadmore-text="加载更多" nomore-text="没有更多了" color="#d0d0d0" />
		</view>
		<!-- 回复帖子的弹窗 -->
		<view class="replyInput" :style="[{ 'bottom':btnContentHeight -3+ 'px'}]">
			<textarea placeholder-class="placeClass" v-model="replyValue" placeholder="写评论" maxlength="1000"
				:adjustPosition="false" :show-confirm-bar="false" @blur="leaveInput" @focus="getHeight"
				:auto-height="true" :maxlength="800" @keyboardheightchange="keyboardheightchange">
			</textarea>
			<view class="replyOperate" v-if="showOperate">
				<view class="operateItem" @click="doCollection(info)">
					<u--image src="/static/solution/2.png" shape="square" mode="aspectFill" width="32rpx" height="32rpx"
						v-if="!info.isCollection">
					</u--image>
					<u--image src="/static/solution/22.png" shape="square" mode="aspectFill" width="32rpx"
						height="32rpx" v-else>
					</u--image>
					<view class="text">{{info.collection||0}}</view>
				</view>
				<view class="operateItem" @click="doThumb(info)">
					<u--image src="/static/solution/3.png" shape="square" mode="aspectFill" width="32rpx" height="32rpx"
						v-if="!info.isThumbsUp">
					</u--image>
					<u--image src="/static/solution/33.png" shape="square" mode="aspectFill" width="32rpx"
						height="32rpx" v-else>
					</u--image>
					<view class="text">{{info.thumbsUp||0}}</view>
				</view>
				<button class="operateItem" @click="showShareContent = true">
					<u--image src="/static/solution/1.png" shape="square" mode="aspectFill" width="32rpx"
						height="32rpx">
					</u--image>
					<view class="text">{{info.share||0}}</view>
				</button>
			</view>
			<u-popup :show="showShareContent" :round="10" mode="bottom" @close="close" @open="open">
				<view class="shareContent">
					<view class="title">分享到</view>
					<view class="shareInfo">
						<button class="shareItem" open-type="share">
							<u--image src="/static/share/2.png" radius="50%" shape="square" mode="aspectFill"
								width="106rpx" height="106rpx">
							</u--image>
							<view class="itemTitle">微信</view>
						</button>
						<button class="shareItem" @click="goDiscuss">
							<u--image src="/static/share/1.png" radius="50%" shape="square" mode="aspectFill"
								width="106rpx" height="106rpx">
							</u--image>
							<view class="itemTitle">社区内发帖</view>
						</button>
					</view>
				</view>
			</u-popup>
			<view class="replyRepublish" v-if="!showOperate" @click="doPublish">
				发布
			</view>
		</view>
		<!-- 回复个人的弹窗 -->
		<view class="replyInput" :style="[{ 'bottom':btnContentHeight2-3 + 'px'}]" v-if="showSomeoneReply">
			<textarea placeholder-class="placeClass" v-model="replySomeValue" :placeholder="someonePlaceholder"
				maxlength="1000" :adjustPosition="false" :show-confirm-bar="false" @blur="leaveInput2"
				@focus="getHeight2" :auto-height="true" :focus="true" :maxlength="800"
				@keyboardheightchange="keyboardheightchange2">
			</textarea>
			<view class="replyRepublish" @click="doSomeonePublish">
				发布
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: "",
				baseUrl: this.$api.baseUrl,
				isLoad: false,
				userId: "",
				role: "",
				info: {},
				authList: [],
				replyValue: "", //回复帖子
				replySomeValue: "", //回复某人
				btnContentHeight: 0,
				btnContentHeight2: 0,
				showOperate: true,
				placeholderStyle: {
					fontSize: "24rpx",
					color: "red"
				},
				showSomeoneReply: false,
				someonePlaceholder: "回复",
				someoneInfo: "",
				isFinish: true,
				showShareContent: false,
			}
		},
		onShow() {
			this.btnContentHeight = 0;
		},
		onLoad(option) {
			this.id = option.id;
			this.$request.get(this.$api.getDic, {
				code: "role"
			}).then(roleInfo => {
				roleInfo.map((item, index) => {
					this.authList[index] = {};
					this.authList[index].name = item.text
					this.authList[index].value = item.value
				})
				uni.getStorage({
					key: "userInfo",
					success: (userInfo) => {
						this.userId = userInfo.data.id;
						this.initData();
					}
				})
				uni.hideLoading()
			})
		},
		methods: {
			goPostsDetail() {
				uni.navigateTo({
					url: "/pages/postDetail/postDetail?id=" + this.info.dcckPosts.id
				})
			},
			goPostsDetail2(type) {
				if (type === "2") {
					uni.navigateTo({
						url: "/pages/newsDetial/newsDetial?id=" + this.info.dcckConsultingService.id
					})
				} else {
					uni.navigateTo({
						url: "/pages/solutionDetial/solutionDetial?id=" + this.info.dcckConsultingService.id
					})
				}
			},
			close() {
				this.showShareContent = false;
			},
			open() {
				this.showShareContent = true;
			},
			goDiscuss() {
				uni.setStorage({
					key: "shareData",
					data: {
						id: this.info.id,
						types: "1"
					},
					success: () => {
						uni.switchTab({
							url: "/pages/discuss/discuss"
						})
					}
				})

			},
			initData(type) {
				this.$request.get(this.$api.postDetail, {
					userId: this.userId,
					id: this.id
				}).then(res => {
					this.isLoad = true;
					this.info = res.result;
					this.role = this.getRoleName(this.info.role);
					if (type === 1) {
						uni.showToast({
							icon: "success",
							title: "发布成功"
						})
					}
					uni.hideLoading()
				})
			},
			getRoleName(value) {
				let roleName = ""
				this.authList.map(item => {
					if (item.value == value) {
						roleName = item.name
					}
				})
				return roleName;
			},
			doPublish() {
				if (!this.replyValue) {
					uni.showToast({
						icon: "none",
						title: "请输入内容"
					})
					return;
				}
				this.$request.post(this.$api.doReply, {
					postsId: this.info.id,
					userId: this.userId,
					text: this.replyValue,
					parentUserId: this.info.userId,
				}).then(res => {
					this.replyValue = "";
					this.initData(1);
					uni.hideLoading()
				})
			},
			getAlbumList(imageStr) {
				if (imageStr) {
					let images = imageStr.split(",");
					let filterImage = images.map(item => {
						return this.baseUrl + "/sys/common/static/" + item
					})
					return filterImage;
				} else {
					return []
				}
			},
			leaveInput(e) {
				this.btnContentHeight = 0;
				this.showOperate = true;
			},
			getHeight(e, a, b) {
				if (e) {
					this.btnContentHeight = e.target.height;
				}
				this.showOperate = false;
			},
			keyboardheightchange(e) {
				if (e && this.btnContentHeight != e.target.height) {
					this.btnContentHeight = e.target.height
				}
			},
			doCollection(info) {
				if (!info.isCollection) {
					this.$request.get(this.$api.collectionPost, {
						id: info.id,
						userId: this.userId
					}).then(res => {
						this.info.isCollection = true;
						this.info.collection++;
						uni.showToast({
							icon: "success",
							title: "收藏成功"
						})
						uni.hideLoading()
					})
				} else {
					this.$request.get(this.$api.collectionPostNo, {
						id: info.id,
						userId: this.userId
					}).then(res => {
						this.info.isCollection = false;
						this.info.collection--;
						uni.showToast({
							icon: "success",
							title: "取消收藏成功"
						})
						uni.hideLoading()
					})
				}

			},
			doThumb(info) {
				if (!info.isThumbsUp) {
					this.$request.get(this.$api.thumbPost, {
						id: info.id,
						userId: this.userId
					}).then(res => {
						this.info.isThumbsUp = true;
						this.info.thumbsUp++;
						uni.showToast({
							icon: "success",
							title: "点赞成功"
						})
						uni.hideLoading()
					})
				} else {
					this.$request.get(this.$api.thumbPostNo, {
						id: info.id,
						userId: this.userId
					}).then(res => {
						this.info.isThumbsUp = false;
						this.info.thumbsUp--;
						uni.showToast({
							icon: "success",
							title: "取消点赞成功"
						})
						uni.hideLoading()
					})
				}

			},
			// 选择某条评论进行回复点赞
			doThumbReply(index, item, index2) {
				let url = this.$api.thumbsReply
				if (item.isThumbsUp) {
					url = this.$api.thumbsReplyNo
				}
				this.$request.get(url, {
					id: item.id,
					userId: this.userId,
				}).then(res => {
					if (item.isThumbsUp) {
						if (index2 || index2 === 0) {
							this.info.replys[index].nextNodes[index2].isThumbsUp = false
							this.info.replys[index].nextNodes[index2].praseCount--;
						} else {
							this.info.replys[index].isThumbsUp = false
							this.info.replys[index].praseCount--;
						}
						uni.showToast({
							icon: "success",
							title: "取消点赞成功"
						})
					} else {
						if (index2 || index2 === 0) {
							this.info.replys[index].nextNodes[index2].isThumbsUp = true;
							this.info.replys[index].nextNodes[index2].praseCount++;
						} else {
							this.info.replys[index].isThumbsUp = true
							this.info.replys[index].praseCount++;
						}
						uni.showToast({
							icon: "success",
							title: "点赞成功"
						})
					}
					uni.hideLoading()
				})
			},
			selectSomeoneReply(item) {
				this.someoneInfo = item;
				this.showSomeoneReply = true;
				this.someonePlaceholder = "回复" + item.nickName + "："
			},
			doSomeonePublish() {
				if (!this.replySomeValue) {
					uni.showToast({
						icon: "none",
						title: "请输入内容"
					})
					return;
				}
				this.$request.post(this.$api.doReply, {
					parentUserId: this.someoneInfo.userId,
					postsId: this.info.id,
					userId: this.userId,
					text: this.replySomeValue,
					lastId: this.someoneInfo.id,
					parentId: this.someoneInfo.parentId || this.someoneInfo.id
				}).then(res => {
					this.replySomeValue = "";
					this.initData(1);
					uni.hideLoading()
				})
			},
			leaveInput2(e) {
				this.btnContentHeight2 = 0;
				this.someonePlaceholder = "回复"
				this.showSomeoneReply = false;
			},
			getHeight2(e) {
				if (e) {
					this.btnContentHeight2 = e.target.height;
				}
			},
			keyboardheightchange2(e) {
				if (e && this.btnContentHeight2 != e.target.height) {
					this.btnContentHeight2 = e.target.height
				}
			}
		}
	}
</script>

<style lang="scss">
	.postDetailPage {
		padding-bottom: 160rpx;
		overflow-x: hidden;

		.topContent {
			padding: 20rpx 40rpx 0;
			border-bottom: 1rpx solid #D0D0D0;

			.title {
				font-size: 36rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 600;
				color: #333333;
				overflow: hidden;
				word-break: break-all;
			}

			.read {
				display: flex;
				justify-content: flex-start;
				flex-wrap: nowrap;
				padding: 20rpx 0;

				.item {
					display: flex;
					justify-content: flex-start;
					flex-wrap: nowrap;
					align-items: center;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					font-size: 26rpx;

					.count {
						padding-left: 10rpx;
					}
				}

				.secondItem {
					padding-left: 40rpx;
				}
			}
		}

		.userContent {
			display: flex;
			justify-content: flex-start;
			z-index: 1;
			align-items: center;
			padding: 0rpx 40rpx;
			width: calc(100%);
			padding-top: 20rpx;

			.avatar {
				position: relative;
				border: 1px solid #fafafa;
				border-radius: 50%;
				background: #D8D8D8;
			}

			.titleContent {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
			}

			.nickName {
				font-size: 40rpx;
				color: #333333FF;
				padding: 0 30rpx;
				position: relative;
				top: -4rpx;
			}

			.roleTag {
				display: flex;
				position: relative;
				left: 30rpx;

				.roleName {
					position: absolute;
					color: #004DA1FF;
					font-size: 22rpx;
					width: 128rpx;
					text-align: center;
					top: 2rpx;
					font-weight: 400;
				}
			}
		}

		.infoContent {
			padding: 20rpx 40rpx 0;

			.detail {
				font-size: 32rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				padding-bottom: 20rpx;

				.topic {
					color: #004DA1FF;
					font-size: 32rpx;
				}
			}

			.ablumContent {
				padding: 40rpx 0;
			}

			.createtime {
				padding-top: 20rpx;
				font-size: 26rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}

		.shareInfo2 {
			display: flex;
			flex-direction: column;
			background: #FFFFFF;
			box-shadow: inset 0px 0px 0px 1rpx rgba(230, 230, 230, .5);
			margin-bottom: 20rpx;
			position: relative;
			top: -2rpx;
			background-color: #F8F8F8;
			padding: 30rpx 20rpx;
			border-radius: 20rpx;

			.itemTop {
				display: flex;
				flex-wrap: nowrap;
				justify-content: flex-start;

				.topLeft {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					width: 100%;
					padding-left: 20rpx;

					.listInfo {
						color: #999999;
						font-size: 26rpx;
						line-height: 35rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 3;
						-webkit-box-orient: vertical;
						letter-spacing: 2rpx;
						height: 100rpx;
						font-family: PingFang SC-Regular, PingFang SC;
					}

					.title {
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #333333;
						font-size: 28rpx;
						letter-spacing: 1rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						padding-right: 20rpx;
					}

					.talk {
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #004DA1;
						font-size: 26rpx;
						display: flex;
						flex-wrap: nowrap;
						overflow: auto;
						margin-right: 20rpx;

						.talkItem {
							flex-shrink: 0;
						}
					}
				}

				.topRight {
					flex-shrink: 0;
					border-radius: 8rpx;
					overflow: hidden;
				}
			}
		}

		.replyContent {
			padding: 20rpx 40rpx 20rpx;

			.count {
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 600;
				color: #333333;
			}

			.replyUser {
				display: flex;
				justify-content: space-between;
				z-index: 1;
				align-items: center;
				padding: 0rpx 0rpx;
				width: calc(100%);
				padding-top: 20rpx;

				.replyUserInfo {
					display: flex;
					justify-content: flex-start;
					width: 100%;

					.avatar {
						border: 1px solid #fafafa;
						border-radius: 50%;
						box-shadow: 0rpx 0 0 1rpx #D8D8D8;
						display: inline-block;
						width: 74rpx;
						height: 74rpx;
					}

					.rightContent {
						display: flex;
						justify-content: flex-start;
						flex-direction: column;
						flex-shrink: 0;
						padding: 0 0 0 20rpx;
						width: calc(100% - 104rpx);

						.replyList {
							font-size: 28rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #333333;
							width: 100%;
							overflow: auto;
							word-break: break-all;
							padding-top: 10rpx;
						}

						.replyListOperate {
							display: flex;
							justify-content: space-between;
							align-items: center;
							font-size: 26rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							padding-top: 20rpx;

							.replyCount {
								display: flex;
								justify-content: space-around;
								align-items: center;
								font-size: 26rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								color: #999999;

								.doThumbsUp {
									display: flex;
									justify-content: space-around;
									align-items: center;
									flex-wrap: nowrap;
									padding-left: 20rpx;

									.thumbCount {
										padding-left: 10rpx;
									}
								}
							}
						}
					}

					.titleContent {
						display: flex;
						justify-content: flex-start;
						overflow: auto;

						.nickName {
							font-size: 26rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #333333;
							position: relative;
							flex-shrink: 0;
						}

						.roleTag {
							display: flex;
							position: relative;
							left: 14rpx;

							.roleName {
								position: absolute;
								color: #004DA1FF;
								font-size: 20rpx;
								width: 118rpx;
								text-align: center;
								font-weight: 400;
								line-height: 32rpx;
							}
						}

						.replyToIcon {
							width: 60rpx;
							display: flex;
							justify-content: center;
							position: relative;
							left: 10rpx;
							transform: rotate(-90deg);
							flex-shrink: 0;
						}
					}
				}
			}
		}

		.replyInput {
			padding: 20rpx 40rpx 20rpx 40rpx;
			position: fixed;
			width: calc(100% - 80rpx);
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			z-index: 9;
			padding-bottom: 20rpx;
			padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
			padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);

			.u-input {
				height: 40rpx;
				line-height: 40rpx;
				font-size: 24rpx;
			}

			.placeClass {
				color: #D0D0D0;
			}

			textarea {
				border: 1rpx solid #D0D0D0;
				width: calc(100% - 40rpx);
				padding: 20rpx 20rpx;
				border-radius: 40rpx;
			}

			.replyOperate {
				display: flex;
				flex-wrap: nowrap;
				width: 300rpx;
				padding-left: 20rpx;
				z-index: 9;

				.operateItem {
					display: flex;
					justify-content: center;
					flex-wrap: nowrap;
					align-items: center;
					font-size: 26rpx;
					width: calc(100% / 3);
					position: relative;
					flex-direction: column;
					line-height: 1;

					.text {
						padding-top: 8rpx;
						display: inline-block;
						width: 100%;
						text-align: center;
					}
				}
			}

			.shareContent {
				height: 400rpx;

				.title {
					height: 100rpx;
					border-bottom: 1rpx solid #eeeeee;
					text-align: center;
					line-height: 100rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}

				.shareInfo {
					display: flex;
					justify-content: space-around;
					flex-wrap: nowrap;
					padding-top: 40rpx;

					.shareItem {
						display: flex;
						flex-direction: column;
						align-items: center;

						.itemTitle {
							padding-top: 30rpx;
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
						}
					}
				}
			}

			.replyRepublish {
				display: flex;
				flex-wrap: nowrap;
				width: 80rpx;
				padding-left: 20rpx;
				z-index: 9;
				text-align: center;
				justify-content: center;
				color: #004DA1FF;
			}
		}
	}
</style>
